<template>
    <div>
        <el-form ref="changeInfoFormRef" :model="changeInfoForm" label-width="200px" :rules="changeInfoFormRules">
            <el-form-item class="btns" label="变更类型：">
                <el-button size="mini" @click="changeQuery">变更查询结果</el-button>
            </el-form-item>
            <el-form-item class="btns" label="变更类型：" prop="merchantEntryAlterationType">
                <el-radio-group v-model="changeInfoForm.merchantEntryAlterationType">
                    <el-radio label="SETTLE_BANKCARD">结算卡</el-radio>
                    <el-radio label="MERCHANT_INFO">商户信息</el-radio>
                    <el-radio label="MERCHANT_CREDENTIAL">资质</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开户人名称：">
                <el-input v-model="changeInfoForm.accountName"></el-input>
            </el-form-item>
            <el-form-item label="变更后开户人名称：">
                <el-input v-model="changeInfoForm.updateAccountName"></el-input>
            </el-form-item>
            <el-form-item label="结算卡号：">
                <el-input v-model="changeInfoForm.accountNo"></el-input>
            </el-form-item>
            <el-form-item label="变更后结算卡号：">
                <el-input v-model="changeInfoForm.updateAccountNo"></el-input>
            </el-form-item>
            <el-form-item label="结算卡类型：">
                <el-select v-model="changeInfoForm.settleBankType" placeholder="结算卡类型">
                    <el-option label="对公" value="1"></el-option>
                    <el-option label="对私" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更后结算卡类型：">
                <el-select v-model="changeInfoForm.updateSettleBankType" placeholder="结算卡类型">
                    <el-option label="对公" value="1"></el-option>
                    <el-option label="对私" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结算卡联行号：">
                <el-input v-model="changeInfoForm.bankCode"></el-input>
            </el-form-item>
            <el-form-item label="变更后结算卡联行号：">
                <el-input v-model="changeInfoForm.updateBankCode"></el-input>
            </el-form-item>
            <!-- <el-form-item label="结算类型：">
                <el-select v-model="changeInfoForm.merchantEntryAlterationType" placeholder="结算卡类型：">
                    <el-option label="T1" value="T1"></el-option>
                    <el-option label="D1" value="D1"></el-option>
                    <el-option label="D0" value="D0"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="结算人身份证开始日期：">
                <el-input v-model="changeInfoForm.settlementIdCardStartDate"></el-input>
            </el-form-item>
            <el-form-item label="结算人身份证结束日期：">
                <el-input v-model="changeInfoForm.settlementIdCardEndDate"></el-input>
            </el-form-item>
            <el-form-item label="结算人身份证号：">
                <el-input v-model="changeInfoForm.settlementIdCardNo"></el-input>
            </el-form-item>
            <el-form-item class="btns" style="text-align:center;" label-width="0">
                <h2>请根据变更的信息提交相应的图片</h2>
            </el-form-item>
            <!-- 下面是图片上传 -->
            <el-form-item label="结算账户指定书：">
                <el-input v-model="changeInfoForm.authorizationForSettlement" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData1">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后结算账户指定书：">
                <img class="img-box" :src="changeInfoForm.after_authorizationForSettlement?changeInfoForm.after_authorizationForSettlement:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="持卡人身份证正面照：">
                <el-input v-model="changeInfoForm.frontOfIdCard" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData2">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时并且结算卡类型对私必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后持卡人身份证正面照：">
                <img class="img-box" :src="changeInfoForm.after_frontOfIdCard?changeInfoForm.after_frontOfIdCard:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="持卡人身份证反面照：">
                <el-input v-model="changeInfoForm.backOfIdCard" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData3">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时并且结算卡类型对私必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后持卡人身份证反面照：">
                <img class="img-box" :src="changeInfoForm.after_backOfIdCard?changeInfoForm.after_backOfIdCard:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="持卡人手持身份证照：">
                <el-input v-model="changeInfoForm.handheldOfIdCard" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData4">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时并且结算卡类型对私必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后持卡人手持身份证照：">
                <img class="img-box" :src="changeInfoForm.after_handheldOfIdCard?changeInfoForm.after_handheldOfIdCard:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="持卡人手持银行卡照：">
                <el-input v-model="changeInfoForm.handheldOfBanCard" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData5">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时并且结算卡类型对私必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后持卡人手持银行卡照：">
                <img class="img-box" :src="changeInfoForm.after_handheldOfBanCard?changeInfoForm.after_handheldOfBanCard:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="银行开户证明：">
                <el-input v-model="changeInfoForm.accountOpeningCertificate" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData6">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    变更开户人名称或结算卡号时并且结算卡类型对公必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后银行开户证明：">
                <img class="img-box" :src="changeInfoForm.after_accountOpeningCertificate?changeInfoForm.after_accountOpeningCertificate:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="转租证明：">
                <el-input v-model="changeInfoForm.subleaseCertificate" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData7">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    个体工商户变更开户人名称必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后转租证明：">
                <img class="img-box" :src="changeInfoForm.after_subleaseCertificate?changeInfoForm.after_subleaseCertificate:imgSrc" alt="" />
            </el-form-item>
            <el-form-item label="开户许可证：">
                <el-input v-model="changeInfoForm.permitForBankAccount" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData8">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    企业商户非同名变更对私变对公必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后开户许可证：">
                <img class="img-box" :src="changeInfoForm.after_spermitForBankAccount?changeInfoForm.after_spermitForBankAccount:imgSrc" alt="" />
            </el-form-item>

            <el-form-item label="结算卡：">
                <el-input v-model="changeInfoForm.bankCard" style="display:none"></el-input>
                <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:60%" :on-success="imgUploadSuccess" :data="imgData9">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    企业商户非同名变更对公变更为非法人结算时必须上传
                </div>
            </el-form-item>
            <el-form-item class="form-item-right" label="更新后结算卡：">
                <img class="img-box" :src="changeInfoForm.after_bankCard?changeInfoForm.after_bankCard:imgSrc" alt="" />
            </el-form-item>
            <el-form-item class="btns">
                <el-button type="primary" @click="confirmChangeInfo(changeInfoForm)">确认11</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="变更结果" :visible.sync="changeResultdialogVisible" :before-close="handleClose">
            <div>
                <el-form :model="queryResult">
                    <el-form-item label="商户号：" class="dialog-form-item">
                        <span>{{queryResult.merchantNo}}</span>
                    </el-form-item>
                    <el-form-item label="变更状态：" class="dialog-form-item">
                        <span v-if="queryResult.alterationStatus=='INIT'">待审核</span>
                        <span v-else-if="queryResult.alterationStatus=='OVERRULE'">申请驳回</span>
                        <span v-else-if="queryResult.alterationStatus=='AUDITED'">审核通过</span>
                    </el-form-item>
                    <el-form-item label="审核结果：" class="dialog-form-item">
                        <span>{{queryResult.result}}</span>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeResultdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeResultdialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    props: {
        id: Number
    },
    data() {
        return {
            // 是否已经更改
            isChange: 0,
            // 要变更的商户信息
            changeInfoForm: {},
            imgData1: { name: 'authorizationForSettlement' },
            imgData2: { name: 'frontOfIdCard' },
            imgData3: { name: 'backOfIdCard' },
            imgData4: { name: 'handheldOfIdCard' },
            imgData5: { name: 'handheldOfBanCard' },
            imgData6: { name: 'accountOpeningCertificate' },
            imgData7: { name: 'subleaseCertificate' },
            imgData8: { name: 'permitForBankAccount' },
            imgData9: { name: 'bankCard' },
            // 图片加载失败图片
            imgSrc: require('../../../../imgs/load-error.png'),
            // 查询结果弹出层
            changeResultdialogVisible: false,
            queryResult: {},
            // 表单验证
            changeInfoFormRules: {
                accountName: [{ required: true, message: '请输入开户人名称', tigger: 'blur' }],
                updateAccountName: [{ required: true, message: '请输入变更后开户人名称', tigger: 'blur' }],
                accountNo: [{ required: true, message: '请输入结算卡号', tigger: 'blur' }],
                updateAccountNo: [{ required: true, message: '请输入变更后结算卡号：', tigger: 'blur' }],
                settleBankType: [{ required: true, message: '请选择结算卡类型：', tigger: 'change' }],
                updateSettleBankType: [{ required: true, message: '请选择变更后结算卡类型', tigger: 'blur' }],
                bankCode: [{ required: true, message: '请输入结算卡联行号', tigger: 'blur' }],
                updateBankCode: [{ required: true, message: '请输入变更后结算卡联行号', tigger: 'blur' }],
                merchantEntryAlterationType: [{ required: true, message: '请选择结算类型', tigger: 'change' }],
                settlementIdCardStartDate: [{ required: true, message: '请输入结算人身份证开始日期', tigger: 'blur' }],
                settlementIdCardEndDate: [{ required: true, message: '请输入结算人身份证结束日期', tigger: 'blur' }],
                settlementIdCardNo: [{ required: true, message: '请输入结算人身份证号', tigger: 'blur' }],
                merchantEntryAlterationType: [{ required: true, message: '请选择变更类型', tigger: 'change' }]
            }
        }
    },
    created() {
        // 请求获取会显得数据
        this.getInfo();
    },
    methods: {
        getInfo() {
            let _this = this;
            this.$axios({
                url: '/admin/channel/other',
                data: {
                    type: 1,
                    userID: _this.id,
                    genre: 9,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.changeInfoForm = res.data.content;
                        _this.$nextTick(() => {
                            _this.$refs.changeInfoFormRef.clearValidate();
                        });
                    }
                }
            });
        },
        confirmChangeInfo(form) {
            let _this = this;
						console.log(form)
            //this.$refs.changeInfoFormRef.validate((valid) => {
                //if (valid) {
                    form.type = 1;
                    form.userID = _this.id;
                    form.genre = 7;
                    _this.$axios({
                        url: '/admin/channel/other',
                        data: form,
                        success(res) {
                            if (res.data.code == 200) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.getInfo();
                            } else {
                                _this.$message.error(res.data.meg)
                            }
                        }
                    });
                //}
            //});
        },
        // 图片上传
        imgUploadSuccess(response, file, fileList) {
            let _this = this;
            if (response.code == 200) {
                switch (response.content.name) {
                    case 'authorizationForSettlement':
                        _this.changeInfoForm.authorizationForSettlement = response.content.path;
                        break;
                    case 'frontOfIdCard':
                        _this.changeInfoForm.frontOfIdCard = response.content.path;
                        break;
                    case 'backOfIdCard':
                        _this.changeInfoForm.backOfIdCard = response.content.path;
                        break;
                    case 'handheldOfIdCard':
                        _this.changeInfoForm.handheldOfIdCard = response.content.path;
                        break;
                    case 'handheldOfBanCard':
                        _this.changeInfoForm.handheldOfBanCard = response.content.path;
                        break;
                    case 'accountOpeningCertificate':
                        _this.changeInfoForm.accountOpeningCertificate = response.content.path;
                        break;
                    case 'subleaseCertificate':
                        _this.changeInfoForm.subleaseCertificate = response.content.path;
                        break;
                    case 'permitForBankAccount':
                        _this.changeInfoForm.permitForBankAccount = response.content.path;
                        break;
                    case 'bankCard':
                        _this.changeInfoForm.bankCard = response.content.path;
                        break;
                }
                _this.$message({
                    type: 'success',
                    message: response.msg
                });
            } else {
                _this.$message.error(response.msg);
            }
        },
        changeQuery() {
            // 1.打开弹出框
            this.changeResultdialogVisible = true;
            // 2.调用请求 在请求里赋值
            this.intoOther(10);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 进件后续的一些操作
        intoOther(genre) {
            let _this = this;
            this.$axios({
                url: '/admin/channel/other',
                data: {
                    type: 1,
                    userID: _this.id,
                    genre: genre
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        _this.queryResult = res.data.content;
                    }
                }
            });
        },
    }
}
</script>
<style  scoped>
/* .el-tab-pane {
    height: 600px;
    overflow: auto;
} */
.el-form-item {
    width: 50%;
    float: left;
}
.form-item-right{
    width: 100%;
}
.el-input {
    width: 200px !important;
}
.img-box {
    width: 110px;
    height: 90px;
    display: inline-block;
}
.btns {
    width: 100% !important;
}
</style>